<template>
  <div class="math-chat">
    <!-- 导航栏 -->
    <div class="nav-header">
      <button class="btn secondary" @click="$router.push('/chat')">
        ← 返回聊天
      </button>
      <h1>🧮 现代数学解题模型</h1>
    </div>

    <div class="chat-layout">
      <!-- 中间：对话区域 -->
      <div class="chat-area">
        <div class="messages-container">
          <!-- 对话消息 -->
          <div 
            v-for="(message, index) in chatMessages" 
            :key="index"
            :class="['message', message.role === 'user' ? 'user-message' : 'ai-message']"
          >
            <div class="message-avatar">
              {{ message.role === 'user' ? '你' : 'AI' }}
            </div>
            <div class="message-content">
              <MarkdownRenderer :content="message.content" />
            </div>
          </div>

          <!-- 加载状态 -->
          <div v-if="solving" class="loading-message">
            <div class="spinner"></div>
            <p>AI正在解题，请稍候...</p>
          </div>
        </div>

        <!-- 输入区域 -->
        <div class="input-area">
          <div class="input-container">
            <textarea
              v-model="mathInput"
              placeholder="请输入数学问题，例如：求解方程 x² + 2x - 3 = 0 或 计算定积分 ∫₀¹ x² dx"
              :disabled="solving"
              @keydown.enter.exact.prevent="solveProblem"
              :style="{ height: textareaHeight + 'px' }"
            ></textarea>
            <div class="resize-buttons">
              <button class="btn resize-btn" @click="resizeTextarea(-20)" :disabled="textareaHeight <= 80">−</button>
              <button class="btn resize-btn" @click="resizeTextarea(20)" :disabled="textareaHeight >= 300">+</button>
            </div>
            <div class="input-actions">
              <button class="btn primary" :disabled="!mathInput.trim() || solving" @click="solveProblem">
                {{ solving ? '解题中...' : '发送' }}
              </button>
              <button class="btn danger" :disabled="!solving" @click="abortSolve">
                中断
              </button>
            </div>
          </div>
        </div>
      </div>
      <div class="preset-sidebar"> <!-- 关键：加回滚动容器类 -->
        <h3>🔖 预设问题</h3> <!-- 可选：恢复标题，和原设计一致 -->
      <!-- 右侧：预设问题 -->
      <div class="question-list">
        <!-- 第一层循环：渲染分类 -->
        <div v-for="(categoryItem, categoryIndex) in presetQuestions" :key="categoryIndex">
          <!-- 分类标题（加样式突出） -->
          <div class="category-title">
            {{ categoryItem.category }}
          </div>
          <!-- 第二层循环：渲染该分类下的问题 -->
          <div 
            v-for="(question, questionIndex) in categoryItem.questions" 
            :key="questionIndex"
            class="question-item"
            @click="selectPresetQuestion(question)"
          >
            {{ question }}
          </div>
        </div>
      </div>
    </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { API_BASE_URL } from '@/config/api';
import MarkdownRenderer from '@/components/MarkdownRenderer.vue';
import 'katex/dist/katex.min.css';

// 会话ID（用于后端会话管理）
let sessionId = ref('');
const router = useRouter();

// 响应式数据
const mathInput = ref('');
const solving = ref(false);
const chatMessages = ref<Array<{
  role: 'user' | 'ai',
  content: string
}>>([]);
let abortController: AbortController | null = null;

// 文本框高度控制
const textareaHeight = ref(120); // 初始高度

// 调整文本框高度
const resizeTextarea = (delta: number) => {
  textareaHeight.value += delta;
  // 限制高度范围
  if (textareaHeight.value < 80) textareaHeight.value = 80;
  if (textareaHeight.value > 300) textareaHeight.value = 300;
};

// 替换原有的 presetQuestions 定义
const presetQuestions = [
  {
    category: "1. 连续动力系统（微分方程）", // 分类标题
    questions: [
      "判断动力系统 \\( \\dot{x} = 3x + 4y, \\ \\dot{y} = -4x + 3y \\) 的平衡点类型与稳定性。",
      "求系统 \\( \\dot{x} = y - x^3, \\ \\dot{y} = -x \\) 在原点处的稳定性。",
      "绘制系统 \\( \\dot{x} = y, \\ \\dot{y} = -\\sin x \\) 的相图并分类轨线类型。",
      "分析捕食–被捕食系统 \\( \\dot{x} = x(1 - y), \\ \\dot{y} = -y + xy \\) 是否存在稳定的周期轨道。"
    ]
  },
  {
    category: "2. 离散动力系统（映射）",
    questions: [
      "对离散系统 \\( x_{n+1} = r x_n (1 - x_n) \\)，当 \\( r = 3.2 \\) 时判断固定点的稳定性。",
      "讨论 Logistic 映射 \\( x_{n+1} = 4x_n(1-x_n) \\) 是否呈现混沌行为。"
    ]
  },
  {
    category: "3. 分岔与混沌理论",
    questions: [
      "讨论系统 \\( \\dot{x} = r + x^2 \\) 的分岔类型。",
      "判断系统 \\( \\dot{x} = \\mu x - y - x(x^2 + y^2), \\ \\dot{y} = x + \\mu y - y(x^2 + y^2) \\) 是否发生 Hopf 分岔。",
      "判断 Duffing 振子 \\( \\ddot{x} + 0.2\\dot{x} - x + x^3 = 0.3\\cos(1.2t) \\) 是否可能出现混沌。"
    ]
  },
  {
    category: "4. 特殊模型分析",
    questions: [
      "分析 Lorenz 系统 \\( \\dot{x} = 10(y-x), \\ \\dot{y} = x(28-z)-y, \\ \\dot{z} = xy - \\tfrac{8}{3}z \\) 的平衡点稳定性。",
      "讨论 FitzHugh–Nagumo 模型 \\( \\dot{v} = v - \\tfrac{v^3}{3} - w + I, \\ \\dot{w} = \\varepsilon (v + a - b w) \\) 在参数 \\( I \\) 变化时是否会产生振荡。"
    ]
  }
];

// 选择预设问题
const selectPresetQuestion = (question: string) => {
  mathInput.value = question;
};

// 组件挂载时创建会话
onMounted(async () => {
  try {
    // 调用后端创建会话接口，指定 module 为 math
    const response = await fetch(`${API_BASE_URL}/api/sessions`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ module: 'math', title: '数学解题会话' })
    });
    
    if (response.ok) {
      const session = await response.json();
      sessionId.value = session.id; // 保存会话ID
      
      // 尝试加载该会话的历史消息
      const messagesResponse = await fetch(`${API_BASE_URL}/api/sessions/${sessionId.value}?module=math`);
      if (messagesResponse.ok) {
        const messagesData = await messagesResponse.json();
        chatMessages.value = messagesData.messages.map((msg: any) => ({
          role: msg.role as 'user' | 'ai',
          content: msg.content
        }));
      }
    } else {
      throw new Error('创建数学会话失败');
    }
  } catch (error) {
    console.error('会话创建失败：', error);
    // 给用户显示错误提示
    chatMessages.value.push({
      role: 'ai',
      content: `⚠️ 初始化失败：${error instanceof Error ? error.message : '无法连接到服务器'}`
    });
  }
});

// 解题逻辑（对接流式接口）
const solveProblem = async () => {
  const question = mathInput.value.trim();
  if (!question || solving.value) return;
  if (!sessionId.value) {
    chatMessages.value.push({
      role: 'ai',
      content: '⚠️ 会话未初始化，请刷新页面重试'
    });
    return;
  }

  // 添加用户消息到对话历史
  chatMessages.value.push({
    role: 'user',
    content: question
  });

  solving.value = true;
  mathInput.value = '';
  abortController = new AbortController();

  // 添加AI消息占位（用于实时更新流式内容）
  const aiMessageIndex = chatMessages.value.length;
  chatMessages.value.push({
    role: 'ai',
    content: '' // 初始为空，后续逐步填充
  });

  try {
    // 构建请求参数
    const requestBody = {
      messages: chatMessages.value.map(msg => ({
        role: msg.role,
        content: msg.content
      }))
    };

    // 构建查询参数（后端要求的所有参数）
    const queryParams = new URLSearchParams({
      session_id: sessionId.value,
      model: 'math-model',
      max_input_length: '1024',
      max_new_tokens: '8192',
      temperature: '0.6',
      top_p: '0.95',
      do_sample: 'true'
    });

    // 调用流式接口
    const response = await fetch(
      `${API_BASE_URL}/api/math/stream?${queryParams.toString()}`,
      {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(requestBody),
        signal: abortController.signal
      }
    );

    if (!response.ok) throw new Error(`请求失败: ${response.status}（请检查服务是否启动）`);
    if (!response.body) throw new Error('未获取到流式响应内容');

    // 处理流式响应（解析SSE格式）
    const reader = response.body.getReader();
    const decoder = new TextDecoder('utf-8');
    let fullResponse = '';

    while (true) {
      const { done, value } = await reader.read();
      if (done) break; // 流式结束

      // 解析SSE数据（过滤空行和结束标记）
      const chunk = decoder.decode(value);
      const lines = chunk.split('\n').filter(line => 
        line.startsWith('data: ') && line.trim() !== 'data: [DONE]'
      );

      // 累加内容并实时更新UI
      for (const line of lines) {
        let content = line.replace('data: ', '');
        if (content) {
          //content = content.replace(/\n/g, '<br>');
          content = content
                    .replace(/[\[\]]/g, '$$$$')  // 将 [ 或 ] 替换为 $$
                    .replace(/[()]/g, '$$');    // 将 ( 或 ）替换为 $
          fullResponse += content;
          chatMessages.value[aiMessageIndex].content = fullResponse; // 实时刷新
        }
      }
    }

  } catch (error) {
    // 错误处理：更新AI消息显示错误
    chatMessages.value[aiMessageIndex].content = `解题失败：${error instanceof Error ? error.message : String(error)}`;
  } finally {
    solving.value = false;
    abortController = null;
  }
};

// 中断解题（适配流式场景）
const abortSolve = () => {
  if (abortController) {
    abortController.abort(); // 终止流式请求
    solving.value = false;
    abortController = null;

    // 更新最后一条AI消息，添加"已中断"标记
    const lastMessage = chatMessages.value[chatMessages.value.length - 1];
    if (lastMessage && lastMessage.role === 'ai') {
      lastMessage.content += `\n\n⚠️ 解题已中断（会话ID：${sessionId.value.slice(0, 6)}）`;
    }
  }
};
</script>

<style scoped>
.math-chat {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--background);
}
.nav-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--card);
}

.nav-header h1 {
  margin: 0;
  font-size: 1.5rem;
  color: var(--primary);
}

.btn.secondary {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
}

.chat-layout {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 16px;
  padding: 16px;
  overflow: hidden;
}

/* 对话区域样式 */
.chat-area {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1 1 auto;
  overflow: hidden;
}

.messages-container {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background: var(--card);
  border-radius: 12px;
  border: 1px solid var(--border);
}


/* 消息样式 */
.message {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
  max-width: 80%;
}

.user-message {
  margin-left: auto;
  flex-direction: row-reverse;
}

.message-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  flex-shrink: 0;
}

.user-message .message-avatar {
  background: var(--secondary);
}

.message-content {
  padding: 12px 16px;
  border-radius: 18px;
  background: var(--muted);
  line-height: 1.6;
  /* 新增：保留换行符和空格，自动折叠多余空格 */
  white-space: normal;
  /* 新增：防止长文本溢出（如URL、长公式） */
  word-break: break-word;
}

/* 用户消息的样式也需要同步修改 */
.user-message .message-content {
  background: var(--primary-weak);
  white-space: pre-line; /* 新增 */
  word-break: break-word; /* 新增 */
}
/* 加载状态 */
.loading-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  color: var(--muted-foreground);
}

.spinner {
  width: 30px;
  height: 30px;
  border: 3px solid var(--border);
  border-top: 3px solid var(--primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 10px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 输入区域样式 */
.input-area {
  background: var(--card);
  border-radius: 12px;
  padding: 16px;
  border: 1px solid var(--border);
}

.input-container {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}


.input-area textarea {
  width: 100%;
  min-height: 80px;
  max-height: 200px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--background);
  color: var(--text);
  resize: vertical;
  margin-bottom: 12px;
  font-size: 14px;
}

/* 缩放按钮样式 */
.resize-buttons {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}

.resize-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--foreground);
}

.resize-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.resize-btn:hover:not(:disabled) {
  background: var(--primary-weak);
  border-color: var(--primary);
}

/* 按钮样式 */
.btn {
  height: 40px;
  padding: 0 14px;
  border-radius: 8px;
  cursor: pointer;
}

.btn.danger {
  background: var(--danger);
  color: #ffffffff;
  border-color: var(--danger);
}

.btn.danger:hover:not(:disabled) {
  opacity: 0.9;
}

.input-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

/* 右侧预设问题样式 */
.preset-sidebar {
  background: var(--card);
  border-radius: 12px;
  padding: 16px;
  border: 1px solid var(--border);
  overflow-y: auto;
}

.preset-sidebar h3 {
  margin: 0 0 16px 0;
  color: var(--foreground);
}

.question-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.category-title {
  font-weight: bold;
  color: var(--primary); /* 用主题主色 */
  margin: 16px 0 8px 0; /* 上下间距 */
  font-size: 15px;
  padding-left: 4px;
  border-left: 3px solid var(--primary); /* 左侧小竖线强调 */
}

.question-item {
  padding: 12px;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
  line-height: 1.4;
}

.question-item:hover {
  background: var(--primary-weak);
  border-color: var(--primary);
}

/* 步骤导航和公式相关样式（保留但未使用） */
.steps-navigation {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.steps-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.step-tab {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}

.step-tab.active {
  background: var(--primary-weak);
  border-color: var(--primary);
  color: var(--primary);
}

.step-content {
  padding: 12px;
  background: var(--background);
  border-radius: 6px;
  font-size: 14px;
}

.related-formulas {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.related-formulas h4 {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: var(--foreground);
}

.formulas-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.formula-card {
  padding: 8px;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 13px;
}

.formula-title {
  font-weight: 500;
  margin-bottom: 4px;
  color: var(--primary);
  font-size: 12px;
}

.formula-expression {
  font-family: 'Times New Roman', serif;
}
</style>